<template>
  <div>
    <div class="ddisp jz wh_7" style="min-width: 1200px">
      <div class="topdq" style="width: calc(100% - 300px);">
        <div class="wh_9 jz vh_max pad_15_0">

          <div class="blue_jb pad_10_0">
            <span class="mag_l-10 xsgb" @click="pageTo(item)" v-for="(item,index) in daohang" :key="index">{{ item.tit }} > </span>
          </div>

          <div @click="addList(item)" class="split_3_7 mag_tb_20 bor_b_hui xsgb" v-for="(item,index) in shuju" :key="index" v-if="shuju">
            <div class="">
              <div class="wh_8 img_100  xsgb"><img :src="$store.state.imageUrltitle+item.image" height="90"></div>
            </div>
            <div class="topdq">
              <div class="aColor ccsl_2 hh fz_22" style="height: 60px">{{item.title}}</div>
              <div class="wz_hui fz_14">
                <span>来源：{{item.name}}</span>
                <span style="margin: 0 30px">作者：{{item.author}}</span>
                <span>时间：{{item.createtime | date}}</span>
              </div>
            </div>
          </div>

          <div class="wz_jz mag_t-50">
            <span @click="add(1)" class="pad_15_20 bor_10 wz_white xyy xsgb blue_jb">返回上一页</span>
            <span @click="add(2)" class="pad_15_20 bor_10 wz_white xsgb xyy mag_l-30 blue_jb">返回上一页</span>
          </div>
        </div>

      </div>
      <div class="topdq" style="width: 300px">
        <div class="topdq">
          <!--新闻-->
          <div class=" mag_tb_20"  style="min-height: 500px">
            <div class="listba split_2">
              <div class="fz_22 boxs centerdq " style="color: #333;"><span class="xsgb aColor">新闻</span></div>
              <div class="centerdq">
                <span @mousemove="edd(1)" :class="xwHover==1?'bColor':''" class="xsgb">一天</span>
                <span @mousemove="edd(2)" :class="xwHover==2?'bColor':''" class="mag_l-10 xsgb">一周</span>
              </div>
            </div>
            <div class="" v-if="xinwen!=''">

              <div v-if="xinwen[0]" class="ddisp pad_10_0 xsgb">
                <div class="centerdq wz_jz em wz_white" style="width: 30px;height: 30px;line-height: 30px;background-color: #f35a55"><span>1</span></div>
                <div class="centerdq" style="width: calc(100% - 50px)">
                  <div class="ccsl_1 hh mag_l-10" style="height: 20px;">{{ xinwen[0].title }}</div>
                </div>
              </div>
              <div v-if="xinwen[1]" class="ddisp pad_10_0 xsgb">
                <div class="centerdq wz_jz em wz_white" style="width: 30px;height: 30px;line-height: 30px;background-color: #f79690"><span>2</span></div>
                <div class="centerdq" style="width: calc(100% - 50px)">
                  <div class="ccsl_1 hh mag_l-10" style="height: 20px;">{{ xinwen[1].title }}</div>
                </div>
              </div>
              <div v-if="xinwen[2]" class="ddisp pad_10_0 xsgb">
                <div class="centerdq wz_jz em wz_white" style="width: 30px;height: 30px;line-height: 30px;background-color: #f9beba"><span>3</span></div>
                <div class="centerdq" style="width: calc(100% - 50px)">
                  <div class="ccsl_1 hh mag_l-10" style="height: 20px;">{{ xinwen[2].title }}</div>
                </div>
              </div>
              <div v-if="xinwen[3]" class="ddisp pad_10_0 xsgb">
                <div class="centerdq wz_jz em wz_white" style="width: 30px;height: 30px;line-height: 30px;background-color: #0263c4"><span>4</span></div>
                <div class="centerdq" style="width: calc(100% - 50px)">
                  <div class="ccsl_1 hh mag_l-10" style="height: 20px;">{{ xinwen[3].title }}</div>
                </div>
              </div>
              <div v-if="xinwen[4]" class="ddisp pad_10_0 xsgb">
                <div class="centerdq wz_jz em wz_white" style="width: 30px;height: 30px;line-height: 30px;background-color:#3582d0 "><span>5</span></div>
                <div class="centerdq" style="width: calc(100% - 50px)">
                  <div class="ccsl_1 hh mag_l-10" style="height: 20px;">{{ xinwen[4].title }}</div>
                </div>
              </div>
              <div v-if="xinwen[5]" class="ddisp pad_10_0 xsgb">
                <div class="centerdq wz_jz em wz_white" style="width: 30px;height: 30px;line-height: 30px;background-color: #7fb1e2"><span>6</span></div>
                <div class="centerdq" style="width: calc(100% - 50px)">
                  <div class="ccsl_1 hh mag_l-10" style="height: 20px;">{{ xinwen[5].title }}</div>
                </div>
              </div>
              <div v-if="xinwen[6]" class="ddisp pad_10_0 xsgb">
                <div class="centerdq wz_jz em wz_white" style="width: 30px;height: 30px;line-height: 30px;background-color: #4ac4f6"><span>7</span></div>
                <div class="centerdq" style="width: calc(100% - 50px)">
                  <div class="ccsl_1 hh mag_l-10" style="height: 20px;">{{ xinwen[6].title }}</div>
                </div>
              </div>
              <div v-if="xinwen[7]" class="ddisp pad_10_0 xsgb">
                <div class="centerdq wz_jz em wz_white" style="width: 30px;height: 30px;line-height: 30px;background-color:#92dbfb"><span>8</span></div>
                <div class="centerdq" style="width: calc(100% - 50px)">
                  <div class="ccsl_1 hh mag_l-10" style="height: 20px;">{{ xinwen[7].title }}</div>
                </div>
              </div>
              <div v-if="xinwen[8]" class="ddisp pad_10_0 xsgb">
                <div class="centerdq wz_jz em wz_white" style="width: 30px;height: 30px;line-height: 30px;background-color: #b7e7fd"><span>9</span></div>
                <div class="centerdq" style="width: calc(100% - 50px)">
                  <div class="ccsl_1 hh mag_l-10" style="height: 20px;">{{ xinwen[8].title }}</div>
                </div>
              </div>
              <div v-if="xinwen[9]" class="ddisp pad_10_0 xsgb">
                <div class="centerdq wz_jz em wz_white" style="width: 30px;height: 30px;line-height: 30px;background-color:#b5e8fd "><span>10</span></div>
                <div class="centerdq" style="width: calc(100% - 50px)">
                  <div class="ccsl_1 hh mag_l-10" style="height: 20px;">{{ xinwen[9].title }}</div>
                </div>
              </div>

            </div>
          </div>
          <!--热门视频-->
          <div>
            <div class="listba">
              <div class="fz_22 boxs centerdq " style="color: #333;"><span class="xsgb aColor">热门视频</span></div>
            </div>
            <div v-if="remenshipinList!=''">

              <div class="ddisp pad_10_0 xsgb">
                <div class="centerdq wz_jz em wz_white" style="width: 30px;height: 30px;line-height: 30px;background-color: #f35a55"><span>1</span></div>
                <div class="centerdq" style="width: calc(100% - 50px)">
                  <div class="ccsl_1 hh mag_l-10" style="height: 20px;">{{ remenshipinList[0].title }}</div>
                </div>
              </div>

              <div
                  v-if="remenshipinList[0]" class="ddisp pad_10_0 xsgb">
                <div class="centerdq wz_jz em wz_white" style="width: 30px;height: 30px;line-height: 30px;background-color: #f79690"><span>2</span></div>
                <div class="centerdq" style="width: calc(100% - 50px)">
                  <div class="ccsl_1 hh mag_l-10" style="height: 20px;">{{ remenshipinList[1].title }}</div>
                </div>
              </div>
              <div
                  v-if="remenshipinList[1]" class="ddisp pad_10_0 xsgb">
                <div class="centerdq wz_jz em wz_white" style="width: 30px;height: 30px;line-height: 30px;background-color: #f9beba"><span>3</span></div>
                <div class="centerdq" style="width: calc(100% - 50px)">
                  <div class="ccsl_1 hh mag_l-10" style="height: 20px;">{{ remenshipinList[2].title }}</div>
                </div>
              </div>
              <div
                  v-if="remenshipinList[2]" class="ddisp pad_10_0 xsgb">
                <div class="centerdq wz_jz em wz_white" style="width: 30px;height: 30px;line-height: 30px;background-color: #0263c4"><span>4</span></div>
                <div class="centerdq" style="width: calc(100% - 50px)">
                  <div class="ccsl_1 hh mag_l-10" style="height: 20px;">{{ remenshipinList[3].title }}</div>
                </div>
              </div>
              <div
                  v-if="remenshipinList[3]" class="ddisp pad_10_0 xsgb">
                <div class="centerdq wz_jz em wz_white" style="width: 30px;height: 30px;line-height: 30px;background-color:#3582d0 "><span>5</span></div>
                <div class="centerdq" style="width: calc(100% - 50px)">
                  <div class="ccsl_1 hh mag_l-10" style="height: 20px;">{{ remenshipinList[4].title }}</div>
                </div>
              </div>

            </div>
          </div>

          <div class="img_100 img_20 mag_tb_20">
            <a class="xsgb" v-for="(item,index) in ggList" :key="index"><img class="pad_5_0" :src="$store.state.imageUrltitle+item.image"/></a>
          </div>

        </div>
      </div>
    </div>
  </div>
</template>

<script>
let timer;
import {getArticle, getplayidApi, getremenVideoApi,getremenXinwen1Api, getremenXinwen7Api} from "@/api/api.js";
export default {
  data() {
    return {
      // 新闻鼠标点击状态 默认1为一天
      xwHover:1,
      xinwen: [],
      xinwen1:[],
      xinwen7:[],
      listid: this.$route.query.listid,
      daohang: JSON.parse(this.$route.query.titlist),
      list:'',
      shuju:[],
      remenshipinList:[],
      ggList:[]
      // SearchText:JSON.parse(this.$route.query.SearchValue)
    };
  },
  created() {
    this.remenshipin(375)
    this.remenxinwen1(388)
    this.remenxinwen7(388)
    this.gg(404)
  },
  methods:{
    pageTo(e){
      this.$router.push(e.path)
    },
    add(e){
      if (e==1){
        this.$router.back()
      }
    },
    edd(e){
      this.xwHover=e
      if(e==1){
        this.xinwen=this.xinwen1
      }else{
        this.xinwen=this.xinwen7
      }
    },
    remenshipin(e){
      let params = {
        cid:e
      };
      getremenVideoApi(params).then(res => {
        if (res.status==200) {
          this.remenshipinList=res.data
        } else {
          console.log(res.msg)
        }
      });
    },
    remenxinwen1(e){
      let params = {
        cid:e
      };
      getremenXinwen1Api(params).then(res => {
        if (res.status==200) {
          this.xinwen1=res.data
          console.log(11111111111,this.xinwen)
          this.xinwen=res.data
        } else {
          console.log(22222222222)
          console.log(res.msg)
        }
      });
    },
    remenxinwen7(e){
      let params = {
        cid:e
      };
      getremenXinwen7Api(params).then(res => {
        if (res.status==200) {
          this.xinwen7=res.data
        } else {
          console.log(res.msg)
        }
      });
    },
    gg(e){
      let params = {
        cid:e
      };
      getArticle(params).then(res => {
        if (res.status==200) {
          this.ggList=res.data
        } else {
          console.log(res.msg)
        }
      });
    },
    获取列表页() {
      console.log(11111,this.listid)
      let params = {
        cid:this.listid
      };
      getArticle(params).then(res => {
        if (res.status==200) {
          this.shuju=res.data
          console.log("打印一下标题数据",res.data)
        } else {
          console.log(res.msg)
        }
      });
    },
    // 传递选中子数据id 跳转到新页面
    addList(e){
      let listid = e.id
      let tit = [
        {tit:'首页',path:'homeList'},
        {tit:'新闻中心',path:'xinwenzhongxin'},
        {tit:'聚焦',path:'jujiao'}
      ]
      var titlist=JSON.stringify(tit);
      this.$router.push({
        path:'listIndex',
        query:{
          listid,
          titlist
        }
      })
    },
  },
  mounted() {
    this.获取列表页()
  },
  watch:{
    $route(n,o){
      if(n.fullPath !== o.fullPath){ //监听路由参数是否变化
       location.reload()
        //强制刷新页面this.获取列表页()
      }
    }
  }
};
</script>

<style scoped>
.listba{
  background: url("../../assets/img/xiexian.png");
  background-size: contain;
}
.bColor{
  color: #255B9E;
}
</style>